import React  from 'react';
import { Modal } from 'antd';
import {
  ProFormSelect,
  ProFormText,
  StepsForm,
  ProFormList,
  ProFormGroup,
  ProFormCascader,
} from '@ant-design/pro-form';
import { TableListItem } from '../data';

export interface FormValueType extends Partial<TableListItem> {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
}

export interface CreateFormProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  createModalVisible: boolean;
  values: Partial<TableListItem>;
  items: any;
  productlist: any;
}

const CreateForm: React.FC<CreateFormProps> = (props) => {
  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={1040}
            bodyStyle={{ padding: '32px 40px 48px' }}
            destroyOnClose
            title={"创建发布"}
            visible={props.createModalVisible}
            footer={submitter}
            onCancel={() => props.onCancel()}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={props.onSubmit}
    >
      <StepsForm.StepForm
        initialValues={{
        }}
        title={"硬件资料"}
      >
        <ProFormList
          name="hardware"
          copyIconProps={false}
          min={1}
          max={1}
          alwaysShowItemLabel={false}
          initialValue={[
            {
              svn: '',
              hard: ""
            },
          ]}
        >
        <ProFormGroup>
        <ProFormCascader
          name="svn"
          label={"svn路径"}
          width="m"
          fieldProps={{
            options: props.items}}
        />
      <ProFormSelect
          name="product"
          width="m"
          mode="multiple"
          label={"产品"}
          valueEnum={props.productlist}
        />
        <ProFormText name="hard" label="硬件版本" />
        </ProFormGroup>
        </ProFormList>
      </StepsForm.StepForm>
      <StepsForm.StepForm
        initialValues={{
        }}
        title={"工具软件资料"}
      >
        <ProFormList
          name="toolware"
          copyIconProps={false}
          min={1}
          max={1}
          alwaysShowItemLabel={false}
          initialValue={[
            {
              svn: '',
            },
          ]}
        >
        <ProFormGroup>
        <ProFormCascader
          name="svn"
          label={"svn路径"}
          width="m"
          fieldProps={{
            options: props.items}}
        />
      <ProFormSelect
          name="product"
          width="m"
          mode="multiple"
          label={"产品"}
          valueEnum={props.productlist}
        />
        </ProFormGroup>
        </ProFormList>
      </StepsForm.StepForm>
      <StepsForm.StepForm
        initialValues={{
        }}
        title={"参数模版"}
      >
        <ProFormList
          name="parameter"
          copyIconProps={false}
          min={1}
          max={1}
          initialValue={[
            {
              svn: '',
            },
          ]}
        >
          <ProFormGroup>
        <ProFormCascader
          name="svn"
          label={"svn路径"}
          width="m"
          fieldProps={{
            options: props.items}}
        />
      <ProFormSelect
          name="product"
          width="m"
          mode="multiple"
          label={"产品"}
          valueEnum={props.productlist}
        />
        </ProFormGroup>
        </ProFormList>
      </StepsForm.StepForm>
      <StepsForm.StepForm
        initialValues={{
        }}
        title={"嵌入式软件资料"}
      >
        <ProFormList
          name="software"
          copyIconProps={false}
          min={1}
          initialValue={[
            {
              svn: '',
            },
          ]}
        >
          <ProFormGroup>
        <ProFormCascader
          name="svn"
          label={"svn路径"}
          width="m"
          fieldProps={{
            options: props.items}}
        />
      <ProFormSelect
          name="product"
          width="m"
          mode="multiple"
          label={"产品"}
          valueEnum={props.productlist}
        />
        <ProFormText name="hard" label="硬件版本" />
        </ProFormGroup>
        </ProFormList>
      </StepsForm.StepForm>
    </StepsForm>
  );
};

export default CreateForm;
